<template>
	<view class="content">
		<view class="bannerBG">
			 <text class="teamTitle">团队总算力&nbsp;&nbsp;{{teamInfo.groupHashRate}}</text>
			 <view style="display: flex;justify-content: space-between;margin-top: 20upx;width: 80%;">
				 <text class="teamSubtitle">直推人数&nbsp;&nbsp;{{teamInfo.ztTotal}}</text>
				 <text class="teamSubtitle">团队人数&nbsp;&nbsp;{{teamInfo.groupTotal}}</text>
			 </view>
		</view>
		<!-- <view style="background-color: #F2F2F2;">
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
				<view class='listContent'>
					<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
						<view style="display: flex;align-items: center;">
							<image style="height: 120upx;width: 120upx;" src="../../static/user/avatar.png" mode=""></image>
							<view style="flex-direction: column;display: flex;margin-left: 20upx;">
								<text style="font-size: $uni-font-size-base;color: black;">张小小</text>
								<text style="font-size: $uni-font-size-base;color: #656565;margin-top: 10upx;">2012-12-12</text>
							</view>
						</view>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<text style="font-size: $uni-font-size-base;color: #12B3F9;">1</text>
							<text style="font-size: $uni-font-size-base;color: #656565;margin-top: 10upx;">算力</text>
						</view>
					</view>
				</view>
				</scroll-view>
			</swiper-item>
		</swiper> -->
		
		<view class='listContent'>
			<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
				<view style="display: flex;align-items: center;">
					<image style="height: 120upx;width: 120upx;" src="../../static/user/avatar.png" mode=""></image>
					<view style="flex-direction: column;display: flex;margin-left: 20upx;">
						<text style="font-size: $uni-font-size-base;color: black;">张小小</text>
						<text style="font-size: $uni-font-size-base;color: #656565;margin-top: 10upx;">2012-12-12</text>
					</view>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;">
					<text style="font-size: $uni-font-size-base;color: #12B3F9;">1</text>
					<text style="font-size: $uni-font-size-base;color: #656565;margin-top: 10upx;">算力</text>
				</view>
			</view>
			<view class='noCard' v-if="listItem.length===0">
				暂无信息
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getUserGroupInfo,
		getUserGroupRecommendList
	} from '@/services/user.service.js';
	
	import navTab from '../../components/navTab.vue';
	export default {
		components: {
			navTab
		},
		data() {
			return {
				tabTitle:['一代会员','二代会员'],
				currentTab:0,
				teamInfo:{
					ztTotal:0,
					groupTotal:0,
					groupHashRate:0.00
				},
				list:[
					[1,2],
					[3,4]
				],
				listItem:[]
			}
		},
		onLoad() {
			var me = this;
			me.requestTeamInfo();
			me.requestTeamList();
		},
		onShow(){
			var that=this;
		},
		methods: {
			changeTab(index){
				this.currentTab = index;
			},
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
			},
			 requestTeamInfo: async function () {
				
				const {data} = await getUserGroupInfo({});
				this.teamInfo = data;
				
			},
			requestTeamList: async function () {
				
				const {data} = await getUserGroupRecommendList({});
				this.listItem = data;
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.content {
		// display: flex;
		// flex-direction: column;
	}
	.bannerBG {
		width: 92%;
		height: 180upx;
		background-color: #12B3F9;
		display: flex;
		flex-direction: column;
		padding-left: 4%;
		padding-right: 4%;
		align-items: center;
		justify-content: center;
		
		.teamTitle {
			font-size: $uni-font-size-lg;
			color: white;
			padding-left: 4%;
		}
		
		.teamSubtitle {
			font-size: $uni-font-size-base;
			color: white;
			padding-left: 4%;
		}
	}
	.listContent {
		width: 100%;
	}
	
	.card {
		margin-left: 4%;
		margin-right: 4%;
		padding-top: 20upx;
		padding-bottom: 20upx;
		display: flex;
		flex-direction:row;
		border-bottom: 1px solid #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}
	.noCard {
		width: 90%;
		height: 200upx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10upx;
	}
	
</style>
